﻿@using FCZLM.Core.Models
@model IEnumerable<FCZLM.Core.Models.News>
@{
    ViewData["Title"] = "商品列表页";
    var CategoryRepository = ViewBag._newsCategoryRepository as List<NewCategorys>;
    Layout = null;
}
<!DOCTYPE html>

<html>
<head> 
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div>
        <div class="demoTable layui-form">
            搜索分类：
            <div class="layui-inline">
                <input class="layui-input" name="Title" id="Title" autocomplete="off">
            </div>
            <div class="layui-inline">
                <select id="NewCategoryId">
                    <option value="0">请选择新闻类型</option>
                    @foreach (var item in CategoryRepository)
                    {
                        <option value="@item.Id">@item.Name</option>
                    }
                </select>
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
            <button class="layui-btn layui-btn-primary" id="btnAdd">添加</button>
        </div>
        <table id="demo" lay-filter="test"></table>
    </div>     
          
<script src="/layui/layui.js" ></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
 
<script>
layui.use('table', function(){
  var table = layui.table; 
  table.render({
   elem: '#demo'
    ,url: '/fnews/index'
    , page: true//开启分页
    , method: "post"
     , height: 312
    //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,cols: [[
        { field: 'id', title: 'ID', width: 50, sort: true, fixed: 'left' }
                    , { field: 'title', title: '新闻标题', width: 150 }
                    , { field: 'subTitle', title: '新闻副标题', width:150, sort: true }
                           
                    , { field: 'clicks', title: '点击量', width: 95, sort: true }
                    , { field: 'createTime', title: '发布时间', width: 120, sort: true }
                    , { field: 'status', title: '状态', width: 80,templet:function(d){
                    if(d.status==1){
                        return "发布"
                    }else if(d.status==0){
                        return "草稿"
                    }
                    
                    } }                   
                    , { field: 'source', title: '新闻来源', width: 80 }                   
                    , { title: '操作', templet: " <span><a lay-event='edit' class='layui-btn layui-btn-warm layui-btn-xs'>编辑</a><a class='layui-btn layui-btn-danger layui-btn-xs' lay-event='del'>删除</a></span>" }
                ]],
                initSort:{
                    field:'id'
                    ,type:'desc'
                },
                id: "newsList"
  });
            var $ = layui.$, active = {
                reload: function () {
                    var titleinput = $("#Title");
                    var NewsCategoryIdinput = $("#NewCategoryId");
                    //执行重载
                    table.reload('newsList', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            Title: titleinput.val(),
                            NewCategoryId: NewsCategoryIdinput.val()
                        }
                    });
                }
            };
            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //单元格工具事件
            table.on('tool(test)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                if (layEvent === 'del') { //删除
                    layer.confirm('确定删除吗？', function (index) {
                        $.post("/fnews/del", { id: data.id }, function (res) {
                            if (res.isSuccess) {
                                layer.msg(res.msg, function () {
                                    table.reload("newsList")
                                });
                            } else {
                                layer.msg(res.msg);
                            }
                        })
                    });
                } else if (layEvent === "edit") {
                    var index = layer.open({
                        type: 2,
                        content: '/fnews/edits/' + data.id,
                        area: ["500px", "600px"]
                    });
                }
            });

            $("#btnAdd").on("click", function () {
                var index = layer.open({
                    type: 2,
                    content: '/fnews/add',
                    area: ["500px", "600px"]
                });
            })
});
</script>
</body>
</html>